<template>
       <div class="warehouse">
        <div class="filterinput">
            <el-form :model="pageInfo" ref="warehouseFilterForm" :inline="true" label-width="100px" class="demo-ruleForm">
                <el-form-item label="发货地：">
                    <el-input v-model.trim="pageInfo.depart_addr"></el-input>
                </el-form-item>
                <el-form-item label="仓库类型：" prop="region">
                    <el-select v-model="pageInfo.type" placeholder="--全部--">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="普通" value="1"></el-option>
                        <el-option label="保税" value="2"></el-option>
                        <el-option label="海外" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('warehouseFilterForm')">搜索</el-button>
                    <el-button @click="resetForm('warehouseFilterForm')">清空</el-button>
                </el-form-item>
                <table-filter :getColumnsRoute="getColumnsRoute"></table-filter>
            </el-form>
        </div>

         <table-view
            :collect="true"
            :selection="true"
            :columns="tableContent"
            :pageList="columnData"
            :filterlist="filterlist"
            @select-change="tableclickback"
            @collect-hange="collectChange"
            ></table-view>
            <pagination-view  :pagesize="pageInfo.pageSize"
            :currentPage="pageInfo.page"
            :total="total"
            @size-change="sizeChange"
            @current-change="pageChange"></pagination-view>
       </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TableFilter from '@/components/TableFilter'
import TableView from '@/components/TableView'
import PaginationView from '@/components/PaginationView'

import { getStoreList } from '@/api/permission'
import { setFav } from '@/api/TableFilter'

export default {
    data () {
        return {
            getColumnsRoute : "/api/logistics/getStoreList",
            columnData : [],
            total:0,
            pageInfo: {
                page: 1,
                page_size: 20,
                depart_addr : '',   //仓库发货地
                type : ''           //仓库类型
            },
            filterlist:['type','is_used'],
        }
    },
    components: {
      PaginationView,
      TableFilter,
      TableView
    },
    methods:{
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              this.pageInfo.page = 1
              this.getData(this.pageInfo);
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.pageInfo.depart_addr = ''
        this.pageInfo.type = ''
      },
        //拉取列表
      getData(data) {
        getStoreList(data).then(res => {
          this.columnData = res.data.list
          this.total = res.data.total || 0
        })
      },
      tableclickback(val){
          console.log(val)
      },
      collectChange(val,index){
          let _data = {
              route : this.getColumnsRoute,
              id : val.id,
              is_fav: val.is_fav ? 0 : 1
          }
          setFav(_data)
          this.columnData[index].is_fav = !val.is_fav
      },
      // pageSize变化函数
      sizeChange(val){
        this.pageInfo.page_size = val;
        this.getData(this.pageInfo);
      },
      // page变化函数
      pageChange(val){
        this.pageInfo.page = val;
        this.getData(this.pageInfo);
      },
    },
    computed: {
        ...mapGetters([
            'tableContent'
        ])
    },
    created: function () {
      this.getData(this.pageInfo)
    },
}
</script>
<style lang="scss">
    .warehouse {
        padding: 20px;
        .filterinput{
            margin-top: 22px;
        }
    }
</style>

